import React, { Component,PureComponent,memo } from 'react'


// class Child extends PureComponent{
//     // shouldComponentUpdate(nextProps){
//     //     if(nextProps.username === this.props.username){
//     //         return false
//     //     }

//     //     return true
//     // }
//     render(){
//         console.log("child")
//         return <div>{this.props.person.username}</div>
//     }
// }

const Child = memo((props) => {
    console.log("child")
    return <div>{props.person.username}</div>
})

// class Counter extends PureComponent{
//     // shouldComponentUpdate(nextProps){
//     //     if(nextProps.count === this.props.count){
//     //         return false
//     //     }

//     //     return true
//     // }
//     render(){
//         console.log("Counter")
//         return <div>{this.props.count}</div>
//     }
// }

const Counter = memo((props) => {
    console.log("Counter")
    return <div>{props.count}</div>
})

export default class Parent extends Component {
    state = {
        username:'lixd',
        count:0,
        person:{
            username:'lixd'
        }
    }

    add = () => {
        this.setState({
            count:this.state.count+1
        })
    }

    change = () => {
        let {person} = this.state;
        person.username = 'zs'
        this.setState({
            person
        })
    }
    render() {
        console.log("parent")
        return (
            <div>
                Parent
                <Child person={this.state.person}/>
                <button onClick={this.change}>change</button>
                <Counter count={this.state.count}/>
                <button onClick={this.add}>add</button>
            </div>
        )
    }
}
